<template>
  <div class="app-container">
    <!-- 主表查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
      <el-form-item label="客户名称">
        <el-select disabled clearable filterable v-model="listQuery.fsiteNo" class="filter-item" placeholder="请选择客户名称">
          <el-option
            v-for="item in getListfsiteNo"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
      </el-form-item>
      <el-form-item label="报警日期">
        <el-date-picker
          v-model="alarmdate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="设备位置">
              <div style="display:flex;justify-content:flex-start;align-items:center">
                 <el-select style="display: inline-block" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择设备位置">
                <el-option
                v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoglab('search')"/>
              </div>
      </el-form-item>
      <el-form-item label="报警类型">
        <el-select v-model="listQuery.fwarringtype" filterable class="filter-item" placeholder="请选择报警类型">
          <el-option v-for="(item, index) in siteTypeOption" :key="index" :label="item.label" :value="item.value"/>
        </el-select>
      </el-form-item>
      </div>
      <div>
      <el-form-item>
        <!-- v-permission="['equipmentUse:useHead:read']" -->
        <el-button
          round
          size="medium"
          class="filter-item"
          :style="{background:buttonColor.lookup,color:buttonColor.color}"
          @click="handleFilter"
          >查找</el-button
        >
      </el-form-item>
      </div>
    </el-form>

    <!-- 主表查询结果 -->
    <el-table
      :height="buttonColor.clientHeightTwo"
      v-loading="listLoading"
      :data="list"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      :header-cell-style="tableColor"
    >
      <el-table-column
        :width="buttonColor.line"
        :index="indexMethod"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column :formatter="datetimeFormat" align="left" label="报警时间" prop="fwarringtime" />
      <el-table-column
        width="160"
        align="left"
        label="客户名称"
        prop="fsiteName"
      />
      <el-table-column
        width="160"
        align="left"
        label="设备位置"
        prop="fpointName"
      />
      <el-table-column
        width="160"
        align="left"
        label="报警设备"
        prop="fequipmenttag"
      />
      <el-table-column
        width="160"
        align="left"
        label="报警编号"
        prop="fwarringid"
      />
      <el-table-column
        width="160"
        align="left"
        label="报警内容"
        prop="fwarringnote"
      />
      <el-table-column align="left" label="报警类型" prop="fwarringtype" >
        <template slot-scope="scope">
          <el-tag>{{ scope.row.fwarringtype | siteTypeFilter }}</el-tag>
        </template>
          <template slot-scope="scope">
            <span
            :style="{color:buttonColor.confirm}"
            v-if="scope.row.fwarringtype === 1"
            >{{ scope.row.fwarringtype | siteTypeFilter }}</span
          >
          <span
            :style="{color:buttonColor.itemisconfirmed}"
            v-if="scope.row.fwarringtype === 2"
            >{{ scope.row.fwarringtype | siteTypeFilter }}</span
          >
          <span :style="{color:buttonColor.itemconfirmed}" v-else-if="scope.row.fwarringtype === 3">{{
            scope.row.fwarringtype | siteTypeFilter
          }}</span>
          <span :style="{color:buttonColor.cityColor}" v-else-if="scope.row.fwarringtype === 4">{{
            scope.row.fwarringtype | siteTypeFilter
          }}</span>
          <span :style="{color:buttonColor.typeback}" v-else-if="scope.row.fwarringtype === 5">{{
            scope.row.fwarringtype | siteTypeFilter
          }}</span>
          <span :style="{color:buttonColor.dispatch}" v-else-if="scope.row.fwarringtype === 6">{{
            scope.row.fwarringtype | siteTypeFilter
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 预约地点搜索弹出框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="searchVisiblelab"
      top="5vh"
    >
     <template slot="title">
        <div :style="titleColor">搜索</div>
      </template>
      <el-form :inline="true" class="demo-form-inline filter">
        <el-form-item label="设备位置">
          <el-input
            v-model="listQuerySearchlab.fpointName"
            clearable
            class="filter-item"
            placeholder="请输入设备位置"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            round
            size="medium"
            class="filter-item"
            :style="{background:buttonColor.lookup,color:buttonColor.color}"
            @click="searchFilterlab"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoadingSearchlab"
        :data="searchListlab"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="设备位置" prop="fpointName" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              :style="{background:buttonColor.confirm,color:buttonColor.color}"
              round
              size="small"
              class="button-margin"
              @click="searchDatalab(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalSearchlab > 0"
        :total="totalSearchlab"
        :page.sync="listQuerySearchlab.page"
        :limit.sync="listQuerySearchlab.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchListlab"
      />
    </el-dialog>

    <!-- 人员搜索弹出框 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="searchVisible"
      top="5vh"
    >
     <template slot="title">
        <div :style="titleColor">搜索</div>
      </template>
      <el-form :inline="true" class="demo-form-inline filter">
        <el-form-item label="人员">
          <el-input
            v-model="listQuerySearch.username"
            clearable
            class="filter-item"
            placeholder="请输入人员"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            round
            size="medium"
            class="filter-item"
            :style="{background:buttonColor.lookup,color:buttonColor.color}"
            @click="searchFilter"
          >查找</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 查询结果 -->
      <el-table
        v-loading="listLoadingSearch"
        :data="searchList"
        :header-cell-style="tableColor"
        stripe
        element-loading-text="正在查询中。。。"
        border
        fit
        highlight-current-row
        height="300"
      >
        <el-table-column align="center" label="账号" prop="id" />
        <el-table-column align="center" label="人员" prop="username" />
        <el-table-column
          align="center"
          label="选择"
          class-name="small-padding"
        >
          <template slot-scope="scope">
            <el-button
              :style="{background:buttonColor.confirm,color:buttonColor.color}"
              round
              size="small"
              class="button-margin"
              @click="searchData(scope.row)"
            >确定</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalSearch > 0"
        :total="totalSearch"
        :page.sync="listQuerySearch.page"
        :limit.sync="listQuerySearch.limit"
        style="padding:14px 10px !important"
        @pagination="getSearchList"
      />
    </el-dialog>
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}
.el-button + .el-button {
  margin-left: 1px;
}
</style>

<script>
import { getAlarmInfo } from "@/api/equipmentDangerset";
import { getListArea ,fsiteOptionsByLevel} from "@/api/area";
import Pagination from "@/components/Pagination";
import moment from "moment";
import { tableColor,buttonColor,titleColor} from "@/filters/index";
import { listRoom } from '@/api/room'
import { listAdmin } from '@/api/admin'

const siteTypeMap = {
  0: "全部类型",
  1: "设备报警",
  2: "空气报警",
  3: "用电报警",
  4: "空开报警",
  5: "消防报警",
  6: "安防报警",
};

export default {
  name: "STcAlarmPush",
  components: { Pagination },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type];
    },
  },
  data() {
    return {
      siteTypeOption: [
        {label:'全部类型',value:0},
        {label:'设备报警',value:1},
        {label:'空气报警',value:2},
        {label:'用电报警',value:3},
        {label:'空开报警',value:4},
        {label:'消防报警',value:5},
        {label:'安防报警',value:6},
      ],
      titleColor,
      selectListlab:[],
      searchVisiblelab: false,
      searchListlab: null,
      listLoadingSearchlab: true,
      totalSearchlab: 0,
      listQuerySearchlab: {
        page: 1,
        limit: 20,
        fpointName: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      siteTypeMap,
      searchFlag:'',
      searchFlaglab:'',

       selectList:[],
      searchVisible: false,
      searchList: null,
      listLoadingSearch: true,
      totalSearch: 0,
      listQuerySearch: {
        page: 1,
        limit: 20,
        username: undefined,
        sort: 'create_time',
        order: 'desc'
      },

      getListfsiteNo:null,
      getListfuseuser: null,
      getListfpointNo: null,
      getListfequipmentbarcoder: null,
      getListflevelno: null,
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        fpointNo: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        faudituser: undefined,
        fauditdate: undefined,
        fauditnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fwarringtype: undefined,
        sort: "create_time",
        order: "desc",
      },
      dataForm: {
        fsiteNo: undefined,
        fuseuser: undefined,
        fusedate: undefined,
        fplanusedate: undefined,
        fwarringid: undefined,
        fpointNo: undefined,
        fpointName: undefined,
        fsiteName: undefined,
        fwarringtype: undefined,
        fwarringnote: undefined,
        fwarringtime: undefined,
        fequipmenttag: undefined,
        fmancount: undefined,
        fplanbegtime: undefined,
        fplanendtime: undefined,
        frealbegtime: undefined,
        frealendtime: undefined,
        fexplanation: undefined,
        faudituser: undefined,
        fauditdate: undefined,
        fauditnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
      },
      actionsTmp: [],
      dialogFormVisible1: false,
      dialogStatus1: "",
      dataForm1: {},

      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "创建",
      },
      tableColor: tableColor,
      buttonColor:buttonColor,
      fbillstateOptions: [
        { value: 1, label: "预约中" },
        { value: 2, label: "已批准" },
        { value: 3, label: "不核准" },
        { value: 8, label: "已取消" },
      ],
    };
  },
   created() {
    this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
    this.listQuery.fwarringtype = 0 //全部报警
    this.alarmdate = [this.parserDate(moment(new Date().setDate(1)).format('YYYY-MM-DD')), new Date()]
     // 用户名称
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })
    this.getList();
     // 预约地点
      this.getSearchListlab()
       getListArea({flag:10,arg1:this.$store.state.user.fsiteNo})
      .then(response => {
        this.getListfpointNo = response.data.data.list
      })
      .catch(() => {
        this.getListfpointNo = []
      })

      // 人员弹出框
      this.getSearchList()
      getListArea({flag:13,arg1:this.$store.state.user.fsiteNo})
      .then(response => {
        this.getListfuseuser = response.data.data.list
      })
      .catch(() => {
        this.getListfuseuser = []
      })

      // 固定资产码
       getListArea({flag:23,arg1:this.$store.state.user.fsiteNo})
      .then(response => {
        this.getListfequipmentbarcoder = response.data.data.list
      })
      .catch(() => {
        this.getListfequipmentbarcoder = []
      })

      // 风险等级
      getListArea({flag:7})
      .then(response => {
        this.getListflevelno = response.data.data.list
      })
      .catch(() => {
        this.getListflevelno = []
      })

  },
  methods: {
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
     // 人员弹出框
    getSearchList() {
      this.listLoadingSearch = true
        const templ={
          fsiteNoBelong:this.$store.state.user.fsiteNo,
          page:this.listQuerySearch.page,
           limit:this.listQuerySearch.limit,
           sort: 'create_time',
           order: 'desc',
           username:this.listQuerySearch.username,
        }
       listAdmin(templ)
      .then(response => {
        this.searchList = response.data.data.list
        this.totalSearch = response.data.data.total
          this.listLoadingSearch = false
      })
      .catch(() => {
        this.searchList = []
        this.totalSearch = 0
          this.listLoadingSearch = false
      })

    },

    // 人员弹出框
    searchFilter() {
      this.listQuerySearch.page = 1
      this.getSearchList()
    },

    // 人员弹出框
    searchData(row) {
      this.searchVisible = false
      if(this.searchFlag==='add'){
      this.dataForm.fuseuser = row.id.toString()
      }else{
      this.listQuery.fuseuser = row.id.toString()
      }
    },

    // 人员弹出框
    searchDialog(data) {
      if(data==='add'){
        this.searchFlag = 'add'
      }else{
        this.searchFlag = 'search'
      }
      this.searchVisible = true
    },

    // 预约地点获取搜索列表
    getSearchListlab() {
      this.listLoadingSearchlab = true
      const temp = {
        fsiteNo:this.$store.state.user.fsiteNo,
        fpointFlag:0,
        page:this.listQuerySearchlab.page,
        limit:this.listQuerySearchlab.limit,
        sort: 'create_time',
        order: 'desc',
        fpointName:this.listQuerySearchlab.fpointName,
      }

       listRoom(temp)
      .then(response => {
        this.searchListlab = response.data.data.list
        this.totalSearchlab = response.data.data.total
          this.listLoadingSearchlab = false
      })
      .catch(() => {
        this.searchListlab = []
        this.totalSearchlab = 0
          this.listLoadingSearchlab = false
      })

    },


    // 预约地点获取搜索列表
    searchFilterlab() {
      this.listQuerySearchlab.page = 1
      this.getSearchListlab()
    },
    // 预约地点获取搜索列表
    searchDatalab(row) {
      this.searchVisiblelab = false
      if(this.searchFlaglab==='add'){
      this.dataForm.fpointNo = row.fpointNo
      }else{
        this.listQuery.fpointNo = row.fpointNo
      }
    },

    // 预约地点获取搜索列表
    searchDialoglab(data) {
       if(data==='add'){
        this.searchFlaglab = 'add'
      }else{
        this.searchFlaglab = 'search'
      }
      this.searchVisiblelab = true
    },

    formatfpointNo: function (row, column) {
      if (this.getListfpointNo) {
        for (let i = 0; i < this.getListfpointNo.length; i++) {
          if (row.fpointNo == this.getListfpointNo[i].value) {
            return this.getListfpointNo[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    formatfuseuser: function (row, column) {
      if (this.getListfuseuser) {
        for (let i = 0; i < this.getListfuseuser.length; i++) {
          if (row.fuseuser === this.getListfuseuser[i].value) {
            return this.getListfuseuser[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },
    formatfequipmentbarcoder: function (row, column) {
      if (this.getListfequipmentbarcoder) {
        for (let i = 0; i < this.getListfequipmentbarcoder.length; i++) {
          if (row.fequipmentbarcode == this.getListfequipmentbarcoder[i].value) {
            return this.getListfequipmentbarcoder[i].label;
          }
        }
        return "";
      } else {
        return "";
      }
    },formatflevelno: function(row, column) {
      if(this.getListflevelno){
        for (let i = 0; i < this.getListflevelno.length; i++) {
        if (row.flevelno === this.getListflevelno[i].value) {
          return this.getListflevelno[i].label
        }
      }
      return ''
      }else{
      return ''
      }
    },

    datetimeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    timeFormat(row, column) {
      const date = row[column.property];
      if (date === undefined || date === null) {
        return "";
      }
      return moment(date).format("HH:mm:ss");
    },
    timeoutFormat(row) {
      let diff_str = "";
      let diff =
        moment(row.frealendtime).format("X") -
        moment(row.fplanendtime).format("X");
      if (Math.floor(diff / 86400) > 0) {
        diff_str += Math.floor(diff / 86400) + "天";
        diff = diff % 86400;
      }
      if (Math.floor(diff / 3600) > 0) {
        diff_str += Math.floor(diff / 3600) + "小时";
        diff = diff % 3600;
      }
      if (Math.floor(diff / 60) > 0) {
        diff_str += Math.floor(diff / 60) + "分钟";
      }
      return diff_str;
    },
     formatDate: function(date) {
      if(typeof(date)==='object'){
         var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = '' + y + m + d
      return ym
      }else{
        return date
      }

    },
    getList() {
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true;
      getAlarmInfo(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    indexMethod(index) {
      index = index + 1;
      return index;
    },
  },
};
</script>
